{% load future wenlincms_tags wlcore_tags report_tags %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="renderer" content="webkit">
    <meta name="robots" content="none">
    <title>企业图谱 - 路径图 | {{ sitesettings.website_name }}</title>
    {% block style %}
        <link rel="stylesheet" href="{{ STATIC_URL }}{{ "element/report/tupu/css/tupu.css"|file_time_stamp }}"/>
        <style>
            .mainbox {
                width: 100%;
                overflow: hidden;
                margin: 0 auto;
            }
            .samlltitle:before {
                content: " ";
                display: block;
                position: relative;
                width: 0;
                height: 0;
                border: 5px #28a7e9 solid;
                left: 0;
                top: 20px;
            }
            .samlltitle {
                border-bottom: 1px solid #28a7e9;
                padding: 0 0 10px 0;
                margin: 0;
                font-size: 17px;
                font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
            }
            #d3force {
                width: 100%;
            }
            @media only screen and (min-width: 1200px) {
                #d3force {
                    height: 850px;
                }
            }
            @media only screen and (max-width: 1200px) {
                #d3force {
                    height: 400px;
                    width: 95%;
                    margin: 50px auto;
                }
            }
            .nodetext, .headtext {
                font-size: 13px;
                fill: "#333";
                text-anchor: middle;
            }
            .nodetext {
                fill-opacity: 0
            }
            .linetext {
                font-size: 12px;
                fill: #333;
                font-weight: 500;
            }
            .nodeimg {
                border-radius: 50%;
            }
            marker {
                fill: #4285f4;
            }
            marker#best {
                fill: #4285f4;
            }
            line.best {
                stroke-width: 1.5;
                stroke: #4285f4;
            }
            line.line {
                stroke-width: 1;
                stroke: #4285f4;
            }
            .details {
                position: fixed;
                top: 70px;
                width: auto;
                border: 1px solid #ddd;
                background-color: #fff;
            }
            .left .details {
                left: 10px;
            }
            .right .details {
                right: 10px;
            }
            .details ul {
                padding: 0;
                margin: 0;
            }
            .details ul li {
                font-size: 14px;
                margin: 10px 0;
                list-style: none;
                text-align: left;
            }
            .details ul li small {
                margin-left: 0px;
                color: #999;
            }
            .panel-heading {
                background: #eee;
                padding: 10px;
            }
            .panel-body {
                padding: 10px 10px 20px;
            }
            .panel-body h5 {
                margin: 0;
            }
            #noedge {
                width: 500px;
                height: 100px;
                position: fixed;
                top: 50%;
                left: 50%;
                margin-left: -250px;
                font-size: 26px;
                color: #bbb;
                margin-top: -50px;
                line-height: 100px;
                text-align: center;
            }
            #saasloading {
                height: 99%;
                margin-left: 0;
                left: 0;
            }
            {#        iphone 开关#}
            .ui-check {
                display: inline-block;
                width: 40px;
                height: 24px;
                vertical-align: top;
            }
            .ui-check label {
                position: relative;
                display: block;
                padding: 1px;
                border-radius: 24px;
                height: 22px;
                background-color: #eee;
                cursor: pointer;
                -webkit-user-select: none;
                -webkit-transition: all 0.3s ease;
            }
            .ui-check label::before {
                content: '';
                display: block;
                border-radius: 24px;
                height: 22px;
                -webkit-transform: scale(1, 1);
                -webkit-transition: all 0.3s ease;
            }
            .ui-check label::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -11px;
                margin-left: -11px;
                display: block;
                border-radius: 100%;
                width: 22px;
                height: 22px;
                background-color: white;
                box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
                -webkit-transition: all 0.3s ease;
            }
            .ui-check input[type=checkbox] {
                display: none;
            }
            #ui-check-close label::before {
                background-color: #4285f4;
            }
            #ui-check-close label::after {
                -webkit-transform: translateX(9px);
            }
            #ui-check-open label::before {
                background-color: #fff;
            }
            #ui-check-open label::after {
                -webkit-transform: translateX(-9px);
            }
            .checklabel {
                font-size: 12px;
                font-weight: 500;
                margin-left: 20px;
            }
            .roadtextbox {
                float: right;
            }
        </style>
    {% endblock %}
</head>
<body>
{% block mainbox %}
    <div class="mainbox">
        <div id="saasloading">
            <div class="spinner">
                <div class="bounce1"></div>
                <div class="bounce2"></div>
                <div class="bounce3"></div>
            </div>
        </div>
        <h4 class="samlltitle">&nbsp;&nbsp;&nbsp;企业图谱 - 路径图
            <span class="roadtextbox">
                <span class="checklabel">显示名称</span>
                <span class="ui-check" id="ui-check-close">
                    <input id="check" type="checkbox"/>
                    <label for="check"></label>
                </span>
                <span class="ui-check" id="ui-check-open">
                    <input id="check1" type="checkbox"/>
                    <label for="check1"></label>
                </span>
            </span>
        </h4>

        <div id="d3force" class="chartbox"></div>
        <div id="noedge" style="display: none">暂无关联路径</div>
        <div id="forceinfo" style="display: none;">
            {% include "element/saas/related/d3_panel_detail.html" %}
        </div>
    </div>
{% endblock %}

<script src="{{ STATIC_URL }}opensource/amazeui-2.4/js/jquery.min.js"></script>
<script src="{{ STATIC_URL }}opensource/d3/d3.v3.js"></script>
<script src="{{ STATIC_URL }}{{ "opensource/miniui-3.5/miniui.js"|file_time_stamp }}" type="text/javascript"></script>
<script>
    mini.parse();
    var colors = ['#c23531', '#DA1B73', '#911BDA', '#1984C7', '#C79F19', '#C719B9'];
    var width = $("#d3force").width();
    var height = $("#d3force").height();
    var img_w, img_h, img_h_s, text_dx, text_dy, force,
            closebtn = $("#ui-check-close"),
            openbtn = $("#ui-check-open");
    var cargument = function (allnodes, edges) {
        img_w = 30;
        img_h = 30;
        img_h_s = 40;
        text_dx = 0;
        text_dy = 17;
        force = d3.layout.force()//layout将json格式转化为力学图可用的格式
                .nodes(allnodes)//设定节点数组
                .links(edges)//设定连线数组
                .size([width, height])//作用域的大小
                .linkDistance(200)//连接线长度
                .charge(-5000)//顶点的电荷数。该参数决定是排斥还是吸引，数值越小越互相排斥
                .start();//开始转换
    };
    var cargument2 = function (allnodes, edges) {
        img_w = 20;
        img_h = 20;
        img_h_s = 30;
        text_dx = 0;
        text_dy = 15;
        force = d3.layout.force()//layout将json格式转化为力学图可用的格式
                .nodes(allnodes)//设定节点数组
                .links(edges)//设定连线数组
                .size([width, height])//作用域的大小
                .linkDistance(50)//连接线长度
                .charge(-1000)//顶点的电荷数。该参数决定是排斥还是吸引，数值越小越互相排斥
                .start();//开始转换
    };

    var svg = d3.select("#d3force").append("svg:svg")
            .attr("width", width)
            .attr("height", height)
            .call(d3.behavior.zoom()
                    .scaleExtent([.6, 3])
                    .on("zoom", function () {
                        svg.attr("transform", "translate(" + d3.event.translate +
                                ")scale(" + d3.event.scale + ")")
                    }))
            .on('dblclick.zoom', null)
            .append('svg:g');
    function chart(root, type) {
        var allnodes = root.nodes;
        addimg(allnodes);
        var edges = [];
        root.edges.forEach(function (e) {
            // Get the source and target nodes
            var sourceNode = allnodes.filter(function (n) {
                        return n.id === e.source;
                    })[0],
                    targetNode = allnodes.filter(function (n) {
                        return n.id === e.target;
                    })[0];

            // Add the edge to the array
            edges.push({
                source: sourceNode,
                target: targetNode,
                relation: e.relation,
                type: e.type
            });
        });
        if (type == "0") {
            cargument(allnodes, edges);
        } else {
            cargument2(allnodes, edges);
        }
        //箭头
        var marker =
                svg.append("svg:defs").selectAll("marker")
                        .data(["line", "best"])//线的种类
                        .enter().append("svg:marker")
                        .attr("id", String)
                        .attr("markerUnits", "strokeWidth")//设置为strokeWidth箭头会随着线的粗细发生变化
                        .attr("markerUnits", "userSpaceOnUse")
                        .attr("viewBox", "0 -5 10 10")//坐标系的区域
                        .attr("refX", 25)//箭头坐标
                        .attr("refY", 0)
                        .attr("markerWidth", 12)//标识的大小
                        .attr("markerHeight", 12)
                        .attr("orient", "auto")//绘制方向，可设定为：auto（自动确认方向）和 角度值
                        .attr("stroke-width", 1)//箭头宽度
                        .append("path")
                        .attr("d", "M0,-5L10,0L0,5");//箭头的路径
        //设置连接线
        var edges_line = svg.selectAll("line")
                .data(edges)
                .enter()
                .append("line")
                .attr("class", function (d) {
                    return d.type;
                })
                {# source to target#}
                .attr("marker-end", function (d) {
                    return "url(#" + d.type + ")";
                });

        {#        //设置线条上的文字#}
        var edges_text = svg.selectAll(".linetext")
                .data(edges)
                .enter()
                .append("text")
                .attr("class", "linetext")
                .text(function (d) {
                    return d.relation;
                });

        var drag = force.drag()
                .on("dragstart", function () {
                    {#                //清除移动#}
                    d3.event.sourceEvent.stopPropagation();
                })
                .on("drag", function (d) {
                    {#   //拖拽开始后设定被拖拽对象为固定#}
                    d.fixed = true;
                });
        var nodes_img = svg.selectAll("image")
                .data(allnodes)
                .enter()
                .append("image")
                .attr("class", "nodeimg")
                .attr("width", function (d) {
                    if (d.imgtype == "startcom" || d.imgtype == "endcom") {
                        return img_h_s
                    } else {
                        return img_w;
                    }
                })
                .attr("height", function (d) {
                    if (d.imgtype == "startcom" || d.imgtype == "endcom") {
                        return img_h_s
                    } else {
                        return img_h;
                    }
                })
                .attr("fixed", "true")
                .attr("xlink:href", function (d) {
                    return d.image;
                })
                .on("mouseover", function (d, i) {
                    {#                    //显示连接线上的文字#}
                    paneldetail(d);
                })
                .on("mouseout", function (d, i) {
                    hidedetail();
                })
                .call(drag);
        var nodes_text = svg.selectAll(".nodetext")
                .data(allnodes)
                .enter()
                .append("text")
                .attr("class", function (d) {
                    if (d.imgtype == "startcom" || d.imgtype == "endcom") {
                        return "headtext"
                    } else {
                        return "nodetext";
                    }
                })
                .attr("dx", text_dx)
                .attr("dy", function (d) {
                    if (d.imgtype == "startcom" || d.imgtype == "endcom") {
                        return 27
                    } else {
                        return text_dy;
                    }
                })
                .text(function (d) {
                    return d.name;
                })
                .on("mouseover", function (d, i) {
                    {#                    //显示连接线上的文字#}
                    paneldetail(d);
                })
                .on("mouseout", function (d, i) {
                    hidedetail();
                });
        force.on("tick", tick);

        function xAngle(v) {
            return Math.atan(v.y / v.x) + (v.x < 0 ? Math.PI : 0);
        }

        function isFiniteNumber(x) {
            return typeof x === 'number' && (Math.abs(x) < Infinity);
        }

        function isVector(v) {
            return isFiniteNumber(v.x) && isFiniteNumber(v.y);
        }

        if (type == "0") {
            showtext();
        } else {
            hidetext();
        }
        function tick() {
            {#            //限制结点的边界#}
            allnodes.forEach(function (d, i) {
                d.x = d.x - img_w / 2 < 0 ? img_w / 2 : d.x;
                d.x = d.x + img_w / 2 > width ? width - img_w / 2 : d.x;
                d.y = d.y - img_h / 2 < 0 ? img_h / 2 : d.y;
                d.y = d.y + img_h / 2 + text_dy > height ? height - img_h / 2 - text_dy : d.y;
            });
            {#            //更新连接线的位置#}
            edges_line
                    .attr("x1", function (d) {
                        return d.source.x;
                    })
                    .attr("y1", function (d) {
                        return d.source.y;
                    })
                    .attr("x2", function (d) {
                        return d.target.x;
                    })
                    .attr("y2", function (d) {
                        return d.target.y;
                    });
            {#            //更新连接线上文字的位置#}
            edges_text
                    .attr("x", function (d) {
                        return (d.source.x + d.target.x) / 2;
                    })
                    .attr("y", function (d) {
                        return (d.source.y + d.target.y) / 2;
                    })
                    .attr('transform', function (d) {
                        // Checks just in case, especially useful at the start of the sim
                        if (!(isVector(d.source) && isVector(d.target))) {
                            return '';
                        }

                        // Get the geometric center of the text element
                        var box = this.getBBox();
                        var center = {
                            x: box.x + box.width / 2,
                            y: box.y + box.height / 2
                        };

                        // Get the tangent vector
                        var delta = {
                            x: d.target.x - d.source.x,
                            y: d.target.y - d.source.y
                        };

                        // Rotate about the center
                        var nn = 180 / Math.PI * xAngle(delta);
                        if (isNaN(nn)) {
                            nn = 0;
                        }
                        return 'rotate('
                                + (nn)
                                + ' ' + center.x
                                + ' ' + center.y
                                + ')';
                    });
            //更新结点图片和文字
            nodes_img
                    .attr("x", function (d) {
                        return d.x - img_w / 2;
                    })
                    .attr("y", function (d) {
                        return d.y - img_h / 2;
                    });
            nodes_text
                    .attr("x", function (d) {
                        return d.x
                    })
                    .attr("y", function (d) {
                        return d.y + img_w / 2;
                    });
        }
    }
    var d3ajax = function () {
        var n1 = getQueryString("ntype1"),
                n2 = getQueryString("pk1"),
                n3 = getQueryString("ntype2"),
                n4 = getQueryString("pk2"),
                n5 = getQueryString("depth");
        $.ajax({
            url: "/saas/related_road_json/?ntype1=" + n1 + "&pk1=" + n2 + "&ntype2=" + n3 + "&pk2=" + n4 + "&depth=" + n5,
            success: function (data) {
                var tabledata = data.table;
                var edges = data.edges;
                var nlen = data.nodes.length;
                if (edges == "") {
                    $(".roadtextbox").hide();
                    $("#noedge").show();
                } else {
                    $(".roadtextbox").show();
                    $("#noedge").hide();
                    if (nlen > 18) {
                        chart(data, "1");
                    } else {
                        chart(data, "0");
                    }
                }
                if (top["win"]) {
                    var datagrid_main = top["win"].mini.get("datagrid_main");
                    datagrid_main.loadList(tabledata, "rowid", "parent");
                    datagrid_main.on("drawcell", function (e) {
                        var field = e.column.field;
                        if (field == "rowname") {
                            var eval = e.value;
                            if (eval == "个人") {
                                e.iconCls = "treeicon1";
                            }
                            else if (eval == "个体户") {
                                e.iconCls = "treeicon2";
                            }
                            else if (eval == "企业") {
                                e.iconCls = "treeicon3";
                            }
                            else if (eval == "投资" || eval == "任职" || eval == "负责人" || eval == "投资并任职") {
                                e.iconCls = "treeicon4";
                            }
                            else if (eval == "股东") {
                                e.iconCls = "treeicon5";
                            }
                        }
                    });
                    datagrid_main.expandPath("2");
                }
                $("#saasloading").hide();
            },
            error: function () {
                console.log("系统错误，联系管理员！");
            }
        });
    };
    d3ajax();
    function addimg(allnodes) {
        {#          //根据node imgtype不同类型添加不同的图片#}
        for (var i = 0, len = allnodes.length; i < len; i++) {
            var obj = allnodes[i];
            if (obj.imgtype == "startcom") {
                obj.image = "/static/element/report/tupu/img/start.png";
                obj.fixed = true;
                obj.x = 50;
                obj.y = height / 2;
                obj.width = 40;
                obj.height = 40;
            }
            if (obj.imgtype == "endcom") {
                obj.image = "/static/element/report/tupu/img/start.png";
                obj.fixed = true;
                obj.x = width - 50;
                obj.y = height / 2;
            }
            if (obj.imgtype == "com") {
                obj.image = "/static/element/report/tupu/img/com.png";
            }
            if (obj.imgtype == "geti") {
                obj.image = "/static/element/report/tupu/img/geti.png";
            }
            if (obj.imgtype == "man") {
                obj.image = "/static/element/report/tupu/img/man.png";
            }
            if (obj.imgtype == "woman") {
                obj.image = "/static/element/report/tupu/img/woman.png";
            }
        }
    }
    //hover显示详情
    function paneldetail(d) {
        var id = d.id;
        var x = d.x;
        if (x < width / 2) {
            $("#forceinfo").removeClass("left").addClass("right");
        } else {
            $("#forceinfo").removeClass("right").addClass("left");
        }
        $.ajax({
            url: "/saas/tupu_basic/" + id,
            async: true,
            success: function (data) {
                $("#forceinfo").html(data).show();
            }
        });
    }
    closebtn.click(function () {
        hidetext();
    });
    openbtn.click(function () {
        showtext();
    });
    function showtext() {
        openbtn.hide();
        closebtn.css("display", "inline-block");
        $(".nodetext").css("fill-opacity", 1);
    }
    function hidetext() {
        closebtn.hide();
        openbtn.css("display", "inline-block");
        $(".nodetext").css("fill-opacity", 0);
    }
    function hidedetail() {
        $("#forceinfo").hide();
    }
    {#    //获取url参/数#}
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return "";
    }
</script>
</body>
</html>
